<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>完成</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<style>
			body{
				overflow: hidden;
			}
			 .mui-bar-nav{
				background: #3478D0;
				height: 115px;
			} 
			.mui-title,.mui-action-back{display:block;color:  white; padding-top: 35px;font-size: 35px;} 
			.mui-action-back{margin-top: 20px;}
			#backIcon{font-size: 50px;}
			.contentBody{margin-top:15px;width:100%; background: #F0F1F1;overflow: auto;}
			#deviceBody{display: relative;}
			#exCircle{
			    margin-top:-84px;
				margin-left: 40px;
			    width: 168px;
			    height: 168px;
			    border-radius: 84px;
			    background-color: white;
			}
			
			#inCircle{
			    margin-top: 11px;
			    margin-left: 11px;      
			    position: absolute;
			    width: 146px;
			    height: 146px;
			    border-radius: 73px;
			    background-color: #4e97de;
			}
			#scanIcon{
				margin-top: 39px;
				margin-left: 39px;   
			}
			.foot{
				height: 120px;
				margin-top: -84px;
				background: white;
			}
			#lanch{
				height:83px;
				width: 256px;
				background: #CBDCF3;
				margin-top: 20px;
				margin-left: 480px;
				position: absolute;
				text-align: center;
				color: white;
				font-size: 35px;
				border-radius: 50px; 
			}
			#lanch > span{
				margin-left: -74px;
				padding-top:29px;
				position: absolute;
				
			}
			.greenDiv{height: 20px;width: 20px;background: #3478D0;float: left;}
			.mui-card-header{height: 50px};
			.m-card{margin-top: 15px;margin-left: 0px ;margin-right: 0px ;padding: 0px;};
			.serialNoSpan{margin-left: 15px;};
			.removeSpan{color: #118CEC;}
			#workflowInfo > div{margin:12px 0;text-align: left;font-size: 15px;}
			span{font-size: 15px;}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!-- <a id="backIcon" href="index.html" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title" >完成</h1>
		</header>
		
		<div style="height:520px;display:block;background: white;margin-top: 120px;text-align: center;">
			<div  style="position: relative; top: 18px"><img src="img/panshi/done.png" style="height:189px;width:189px"/><div>
			<h1 style="margin-top: 32px">操作成功</h1>
			<div style="margin-top: 20px;color:#888888;font-size: 25px;"><span >工单发起成功，请耐心等候审批结果</span></div>
			<button id="doneBtn" type="button" style="margin-top: 30px;height:74px;width: 325px;font-size: 25px;"class="mui-btn mui-btn-primary mui-btn-outlined">
				完成
			</button>
		</div>
		
		
		<div class="contentBody" id="deviceBody" >
			<div class="mui-card">
				<div class="mui-card-content" id="workflowInfo"></div>
			</div>
			
		
		</div>
		
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			function getUrlParam(name) {
			            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			            if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
					
			
			var workflowInfo ;
			var devices ;
			var resp;
			window.onload = function(){
				
				resp = getUrlParam("resp");
				if(resp){
					var respJson = JSON.parse(decodeURI(resp));
					workflowInfo = respJson.workflowInfo;
					devices = respJson.devices;
				}
				
				
				var targetW = 750;
				var scale = document.documentElement.clientWidth / targetW;
				var meta = document.querySelector("meta[name='viewport']");
				meta.content = "width=device-width,initial-scale=" + scale + 
				",maximum-scale=" + scale +
				",minimum-scale=" + scale +
				",user-scalable=no" ;  
				
				var styleNode = document.createElement("style");
				var bodyHeight = document.documentElement.clientHeight - (115+512);
				styleNode.innerHTML = ".contentBody{height: "+ bodyHeight + "px;}";
				document.head.appendChild(styleNode);
				
				fillBody();
			}
			
			
			
			function fillBody(){
				if(!resp){
					return;
				}
				var deviceBody = document.querySelector("#deviceBody");
				var workflowInfoDiv = document.querySelector("#workflowInfo");
				workflowInfoDiv.innerHTML += '<div> 工单编号：' + workflowInfo.workflowId + "</div>" 
				+ "<div> 工单编号：" + workflowInfo.type + "</div>"
				+ '<div> 审批人：' + workflowInfo.operator + "</div>"
				+ '<div> 提交时间：' + workflowInfo.time + "</div>"
				
				
				deviceBody.style.display = "block";
				for(var i=0;i<devices.length;i++){
					var divNode = document.createElement("div");
					var device = devices[i] ;
					var deviceJson = device;
					divNode.className = "mui-card";
					divNode.innerHTML += '<div class="mui-card-header">  <div><div class="greenDiv"></div> <span class="serialNoSpan">设备编号:' + deviceJson.serialNo + '</span></div> </div>';
					divNode.innerHTML += 
					'<div class="mui-card-content">'
						+'<div class="mui-card-content-inner" style="margin:auto">'
							+ '<div style="float:left;width:400px;"><span style="float:left">机房编号：' + deviceJson.roomNo + '</span></div >' +  '<div style="float:left;padding-left:130px;width:300px;"><span style="float:left">机架编号：'+ deviceJson.rackNo+'</span></div><BR/><br/>' 
							+ '<div><div style="float:left;width:400px; "><span style="float:left">设备厂商：' + deviceJson.manufacturer + '</span></div >' +  '<div style="float:left;padding-left:130px;width:300px;padding-right:0px"><span style="float:left">设备类型：'+ deviceJson.typeNo+'</span></div> </div><BR/>'  						
						+'</div>'
					+'</div>';
					deviceBody.appendChild(divNode);
					
				}
			}
			
			document.getElementById("doneBtn").addEventListener('tap', function() {
				var url = "index.html";
				window.location.href = url;
			});
			
			
		</script>
	</body>

</html>